<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>小米顶部导航</title>

        <style type="text/css">
            body { margin: 0 ; padding: 0 ; }
            .header { width: 100% ; background: rgb(240, 240, 240) ; }
            /* 后代选择器 */
            .header .container {
                width: 80% ;
                margin: auto ;
             }

             .header>.site-topbar {
                 height: 50px ; background: rgb(70, 70, 70) ;
             }

             /* 先使用 亲子选择器 再使用 后代选择器 */
             .header>.site-topbar .container {
                display: flex ; flex-grow: row nowrap ;
             }

             .header .site-topbar .container .left { width: 80% ; }
             .header .site-topbar .container .right { 
                 width: 20% ; background: #fff ; height: 50px ; line-height: 50px ; text-align: center ;
                 position: relative ; /* 父元素采用 相对定位 是为了让子元素能够相对于自己进行定位 */
             }

             .header .site-topbar .container .right .car {
                 background: #fff ;
                 height : 0 ;
                 width: 200% ; /* 相对于父元素来确定自个儿的宽度 */
                 position: absolute ; /* 相对于首个非static定位的父元素或浏览器窗口进行定位 */
                 right: 0 ;
                 top : 50px ;
                 transition: all 1000ms linear ;
             }

             .header .site-topbar .container .right:hover .car {
                height: 100px ;
                box-shadow: 0 0 5px 4px #dedede ;
             }

             .header>.site-header {
                 height: 100px ; background: rgb(255, 255, 197) ;
             }
        </style>

    </head>

    <body>

        <div class="header">
            <div class="site-topbar">
                <div class="container">
                    <span class="left"></span>
                    <span class="right">
                        购物车
                        <div class="car"></div>
                    </span>
                </div>
            </div>
            <div class="site-header">
                <div class="container"></div>
            </div>
        </div>

    </body>

</html>